<template>
  <el-row>
    <el-col align="center">
      <el-card style="align-items: center;width: 30%">
        <div slot="header" class="clearfix">
          <span>新增知识</span>
        </div>
        <el-form label-width="auto" ref="form" :model="form">
          <el-form-item label="问题标题">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="所属系统">
            <el-select v-model="form.categoryId" placeholder="请选择活动区域">
              <el-option
                v-for="item in options"
                :key="item.name"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="问题描述">
            <el-input type="textarea" v-model="form.content"></el-input>
          </el-form-item>
          <el-form-item label="解决办法">
            <el-input type="textarea" v-model="form.anwser"></el-input>
          </el-form-item>
          <el-form-item label="上传后图片地址" v-show="false">
            <el-input type="text" v-model="form.imageurl"></el-input>
          </el-form-item>


          <!--图片上传-->
          <el-upload
            drag
            action="#"
            :show-file-list="false"
            :auto-upload="false"
            :on-change="uploadFile"
            accept="image/png"
            :before-upload="beforeAvatarUpload"
          >
            <i
              v-if="imageUrl1"
              class="el-icon-circle-close deleteImg"
              @click.stop="handleRemove1"
            ></i>
            <img v-if="imageUrl1" :src="imageUrl1" class="avatar"/>

            <div v-else>
              <i class="el-icon-picture" style="margin-top: 40px; font-size: 40px; color: #999a9c"></i>
              <div class="el-upload__text1">上传图片</div>
              <div class="el-upload__text">* 不超过1m</div>
              <div class="el-upload__text">格式为png</div>
            </div>
          </el-upload>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button @click="gotoIndex">返回</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>

import service from '@/utils/http';

export default {
  name: "addnewPage",
  data() {
    return {
      imageUrl1: '',
      form: {
        title: '',
        categoryId: '',
        content: '',
        anwser: '',
        imageurl: '',
      },
      options: [],
    }
  },
  mounted() {
    this.getTypeList();
  },
  methods: {
    getTypeList() {
      service.post('category/queryAll', {}).then(res => {
        this.options = res;
      })
    },
    gotoIndex() {
      this.$router.push({path: '/'});
    },
    uploadFile(item) {
      let formData = new FormData();
      let file = item.raw;
      this.imageUrl1 = URL.createObjectURL(file);
      formData.append("file", file);
      service.post('image/uPictureCheck', {titlemsg: this.form.title}).then(res => {
        console.log(res)
        if (res.code === 200) {
          service.post('image/uPictureV1', formData).then(res => {
            this.form.imageurl = res.data;
            alert(res.message)
          });
        }else{
          alert("上传失败")
        }
      })
    },
    // 删除只需清空imageUrl1即可
    handleRemove1(file, fileList) {
      this.imageUrl1 = "";
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    onSubmit() {
      service.post('post/addPost', this.form).then(res => {
        this.$message.info(res);
      })
    },
    backIndex() {
      this.$router.push({path: '/'});
    },
  },
}
</script>

<style scoped>
.deleteImg {
  font-size: 30px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
}

html, body {
  height: 100%;
  overflow: auto;
}

body {
  padding: 0;
  margin: 0;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
